<template>
  <div class="preview">
    <div class="header-top">
      <div class="title">
        <el-icon><HomeFilled /></el-icon>
        <!-- <span class="title">{{ title }}</span> -->
      </div>
      <!-- <el-breadcrumb class="edit-breadcrumb" :separator-icon="ArrowRight">
        <el-breadcrumb-item :to="{ path: '/' }">编辑</el-breadcrumb-item>
        <el-breadcrumb-item>分享</el-breadcrumb-item>
        <el-breadcrumb-item>报表</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="action">
        <el-button size="small" type="primary" @click="handleShare">分享</el-button>
        <el-button size="small" type="primary" plain @click="handlePreview">预览</el-button>
      </div> -->
    </div>
    <div class="content">
      <div class="tabs">
        <div class="tab" :class="{ active: activeTab === 'phone' }">手机</div>
        <div class="tab" :class="{ active: activeTab === 'pc' }">pc</div>
      </div>
      <div class="preview-content">
        <div class="preview-phone">
          <iframe src="https://www.baidu.com" frameborder="0" width="375" height="667"></iframe>
        </div>
        <div class="preview-pc">
          <iframe src="https://www.baidu.com" frameborder="0" width="100%" height="100%"></iframe>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const activeTab = ref('phone')
</script>

<style scoped lang="scss">
.preview {
  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .tabs {
      display: flex;
      padding: 4px;
      background-color: #f5f5f5;
      width: 200px;
      gap: 8px;
      .tab {
        padding: 4px 8px;
        border-radius: 4px;
        width: 50%;
        text-align: center;
        cursor: pointer;
        &:hover {
          background-color: #e6e6e6;
          color: #409eff;
        }
        &.active {
          color: #409eff;
        }
      }
    }
  }
}
</style>
